<template>
  <div>
   <!-- 搜索框 -->
   <my-search></my-search>
    <!-- 轮播图 -->
    <swiper indicator-dots=true>
      <swiper-item v-for="(item,index) in swiperdata" :key="index">
        <img :src="item.image_src">
      </swiper-item>
    </swiper>
    <!-- 分类 -->
    <div class="classify">
      <img :src="item.image_src" alt="" v-for="(item,index) in classdata" :key="index">
    </div>
    <!-- 商品展示 -->
    <div class="product" v-for="(item,index) in floordata" :key="index">
      <div class="product-title">
        <img :src="item.floor_title.image_src" alt="">
      </div>
      <div class="product-center">
        <div class="product-center-left">
          <img :src="item.product_list[0].image_src" alt="">
        </div>
        <div class="product-center-right" >
          <img :src="items.image_src" alt="" v-for="(items,i) in item.floord" :key="i">
        </div>
      </div>
    </div>
    <!-- 回顶按钮 -->
    <div class="db" v-show="dbs" @click="product">
      顶部
    </div>
  </div>
  
</template>
<script>
import request from "../../request"

export default {
  computed:{
    
    listdata:function(){
      console.log(this)
      this.floordata.map((item)=>{
             item.floord= item.product_list.slice(1)
            
         console.log(item)
         
        
      })
     return console.log(this.floordata)
        
    }
  },
   created(){
     this.getdata()
   
    // wx.request({
    //   url:"https://www.zhengzhicheng.cn/api/public/v1/home/swiperdata",
    //   method:"get",
    //   success:(req)=>{
    //     this.swiperdata=req.data.message
    //     console.log(req)
    //   }
    // })
    // wx.request({
    //   url:"https://www.zhengzhicheng.cn/api/public/v1/home/catitems",
    //   method:"get",
    //   success:(req)=>{
    //     this.classdata=req.data.message
    //   }
    // })
    // wx.request({
    //   url:"https://www.zhengzhicheng.cn/api/public/v1/home/floordata",
    //   method:"get",
    //   success:(req)=>{
    //     this.floordata=req.data.message
    //     console.log(req)
        
        
    //   }
    // })
   
    // request("swiperdata").then((req)=>{
    //   this.swiperdata=req.data.message
    // })
    //  request("catitems").then((req)=>{
    //    this.classdata=req.data.message
    // })
    //  request("floordata").then((req)=>{
    //   this.floordata=req.data.message
    // })

  },
  data () {
    return {
      swiperdata:[],
      classdata:[],
      floordata:[],
      dbs:false
    }
  },
  methods:{
    // 页面初始化数据
   async getdata(){
       const req = await request("home/swiperdata")
  this.swiperdata=req.data.message
     const res = await request("home/catitems")
this.classdata=res.data.message
      const red = await request("home/floordata")
      this.floordata=red.data.message
    },
    product(){
      wx.pageScrollTo({
        scrollTop:0
      })
    }

  },
  onPageScroll(e){
   
    
    // e.scrollTop>100?this.dbs=true:this.dbs=false;
    if(e.scrollTop>50){
      this.dbs=true
    }else{
      this.dbs=false
    }
   
  }
}

</script>
<style scoped>

  
  swiper img{
    width: 750rpx;
  }
  .classify{
    display: flex;
    margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 20rpx;

  }
  .classify img{
    /* flex: 1; */
    width:70px;
    height:130rpx;
    margin-right: 20px;
  }
  .product{
    margin-top: 10rpx;
  }
  .product-title{
    height:80rpx;
  }
  .product-title img{
    width: 750rpx;
    height:80rpx;
  }
  .product-center{
    display: flex;
  }
  .product-center-left img{
    width: 300rpx;
    height:400rpx;
  }
  .product-center-right{
    flex: 1;
flex-wrap: wrap;
  }
  .product-center-right img{
    width: 200rpx;
    height:195rpx;
    margin:0 10rpx;

  }
  .db{
    width: 80rpx;
    height: 80rpx;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    position: fixed;
    bottom:30rpx;
    right:20rpx;
    font-size: 12px;
    line-height: 80rpx;
    
  }
</style>
